<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图表展示</title>
    <link rel="stylesheet" href="/css/style.css" th:href="@{/css/style.css}">
    <script th:src="@{/js/echarts.js}"></script>
    <script src="/js/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>

<!-- 引入头部 -->
<header th:replace="~{top}"></header>

<!-- 图表容器 -->
<div id="app" style="width: 90%; margin: 40px auto; display: flex; flex-direction: row; align-items: center;">
    <canvas id="type_avgrating" style="width: 100%; max-width: 600px; height: 400px;"></canvas>
    <canvas id="region_movie_count" style="width: 100%; max-width: 600px; height: 400px;"></canvas>
</div>

<!-- 引入底部 -->
<div th:replace="~{footer :: footer}"></div>

<script>

    let echart_type_avgrating= {types: [], ratings: []};
    let echart_region_movie_count = {regions: [], counts: []};
    axios.get("/echart/type_avgrating").then(function (response) {
        echart_type_avgrating.ratings = response.data.ratings;
        echart_type_avgrating.types = response.data.types;
        // 初始化 ECharts 实例
        var chartDom = document.getElementById('type_avgrating');
        var myChart = echarts.init(chartDom);

        var option = {
            title: {
                text: '电影评分分布图'
            },
            tooltip: {},
            xAxis: {
                data: echart_type_avgrating.types
            },
            yAxis: {
                type: 'value',
                name: '平均评分'
            },
            series: [{
                name: '评分',
                type: 'bar',
                data: echart_type_avgrating.ratings
            }]
        };
        myChart.setOption(option);
    }).catch(function (error) {
        console.log(error);
    });
    axios.get("/echart/region_movie_count").then(function (response) {
        let list = response.data;
        console.log(list);
        echart_region_movie_count.counts  = list.map(item => {
            return item.count;
        });
        echart_region_movie_count.regions = list.map(item=>{
            return item.region;
        });
        // 初始化 ECharts 实例
        var chartDom = document.getElementById('region_movie_count');
        var myChart = echarts.init(chartDom);

        var option = {
            title: {
                text: '电影地区播放量'
            },
            tooltip: {},
            xAxis: {
                data: echart_region_movie_count.regions
            },
            yAxis: {
                type: 'value',
                name: '播放量'
            },
            series: [{
                name: '播放量',
                type: 'bar',
                data: echart_region_movie_count.counts
            }]
        };
        console.log(option);
        myChart.setOption(option);
    }).catch(function (error) {
        console.log(error);
    });

</script>
<!-- 站点 JavaScript -->
<script src="/js/main.js" th:src="@{/js/main.js}"></script>
</body>
</html>
